import fetch from 'isomorphic-fetch';

export const REQUEST_POSTS = 'REQUEST_POSTS';
export const RECEIVE_POSTS = 'RECEIVE_POSTS';
export const SELECT_REDDIT = 'SELECT_REDDIT';
export const INVALIDATE_REDDIT = 'INVALIDATE_REDDIT';

export function selectReddit(reddit) {
    return {
        type: SELECT_REDDIT,
        reddit,
    };
}

export function invalidateReddit(reddit) {
    return {
        type: INVALIDATE_REDDIT,
        reddit,
    };
}

function requestPosts(reddit) {
    return {
        type: REQUEST_POSTS,
        reddit,
    };
}

function receivePosts(reddit, json) {
    return {
        type: RECEIVE_POSTS,
        reddit,
        posts: json.data.children.map(child => child.data),
        receivedAt: Date.now(),
    };
}


// 这个action创建函数之所以返回带有dispatch参数的函数，就是得益于Thunk中间件的加工。
function fetchPosts(reddit) {
    console.log('[actions/index.js] fetchPosts 参数 reddit:',reddit)
    // 通过Thunk中间件编写异步action创建函数
    return dispatch => {
        dispatch(requestPosts(reddit));

        // 使用fetch()方法执行网络请求，fetch方法会返回一个Promise对象

        // fetch()方法接受了一个URL作为参数，返回了一个Promise对象。
        return fetch(`https://www.reddit.com/r/${reddit}.json`)
            // 然后使用 then() 方法在Promise对象中拿到一个Response对象，因为这里是JSON格式的数据，所以使用 response.json() 来解析并返回。
            .then(response => response.json())
            // 最后再次使用then()方法拿到上一个then()方法中返回json数据并打印。
            .then(json => dispatch(receivePosts(reddit, json)));
    };
}

function shouldFetchPosts(state, reddit) {
    const posts = state.postsByReddit[reddit];
    if (!posts) {
        return true;
    }
    if (posts.isFetching) {
        return false;
    }
    return posts.didInvalidate;
}

export function fetchPostsIfNeeded(reddit) {
    return (dispatch, getState) => {
        if (shouldFetchPosts(getState(), reddit)) {
            return dispatch(fetchPosts(reddit));
        }
        return null;
    };
}
